import React, { useState, useEffect } from 'react';
import { Button, Form, Input, DatePicker, Space, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { quxiao_list, quxiao_delete } from '../../../api/niu';
import './Quxiao.scss';

interface DataType {
    key: string;
    name: string;
    state: string;
    time: string;
    matterid: any
}
const { RangePicker } = DatePicker;
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

interface Props { }

function Quxiao(props: Props) {
    const [form] = Form.useForm();


    // 数据源
    var [qixoaData, setQuxiaoData] = useState<DataType[]>([])

    var quxiaolist = async () => {
        var res = await quxiao_list();
        console.log(res.data)
        setQuxiaoData(res.data);
    }
    useEffect(() => {
        quxiaolist();
    }, [])


    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            render: (_, record) => <a>{qixoaData.indexOf(record) + 1}</a>,
            width: 100,
        },
        {
            title: '事项名称|编码',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '取消时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, record) => (
                <Space size="middle">
                    {/* <Button onClick={() => { deleteAdmin(record.matterid) }}>查看</Button> */}
                    <Button onClick={() => { toPublish(record.matterid) }}>转发布</Button>
                    <Button onClick={() => { deleteMatterid(record.matterid) }}>删除</Button>
                </Space>
            ),
        }
    ];

    var toPublish = async (matterid: string) => {
        console.log(matterid)
    }
    var deleteMatterid = async (matterid: string) => {
        console.log(matterid)
        var res = await quxiao_delete({ id: matterid });
        console.log(res.data)
    }

    const onFinish = (values: any) => {
        console.log(values);
    };

    const onReset = () => {
        form.resetFields();
    };

    return (
        <div className='quxiaoBox'>
            <div className='quxiaoBox-top'>
                <Form
                    {...layout}
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{ maxWidth: 1435 }}
                >
                    <div className='topBox'>
                        <Form.Item className='search' name="name" label="事项名称" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item className='search' name="code" label="事项编码" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item className='search-time' name="canceltime" label="取消时间" rules={[{ required: true }]}>
                            <RangePicker />
                        </Form.Item>
                    </div>
                    <Form.Item className='topBottom' {...tailLayout}>
                        <Button className='search' type="primary" htmlType="submit">
                            查询
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <div className='quxiaoBox-bottom'>
                <Table columns={columns} dataSource={qixoaData} />
            </div>
        </div>
    );
}

export default Quxiao;